<template>
    <div>
        <cu-navbar>
            <block slot="content">编辑地址</block>
        </cu-navbar>
        <view class="container">
            <div style="background-color: #ffffff;padding: 20px">
                <u-form @submit="submitForm" :model="formData" :rules="formRules" label-width="100px">
                    <u-form-item label="收货人姓名" prop="consignee">
                        <u-input v-model="formData.consignee" placeholder="请输入姓名" />
                    </u-form-item>
                    <u-form-item label="联系电话" prop="mobile">
                        <u-input v-model="formData.mobile" placeholder="请输入联系电话" />
                    </u-form-item>
                    <u-form-item label="所在地区" prop="address">
                        <div @click.stop="clickress" style="color: rgb(192, 196, 204);">
                            {{ formData.address || '选择地区'}}
                        </div>
                        <u-picker mode="region" @confirm="confirm" @cancel="selectAddressShow=false"
                                  v-model="selectAddressShow"></u-picker>
                    </u-form-item>
                    <u-form-item label="详细地址" prop="detailaddress">
                        <u-input class="textarea" v-model="formData.detailaddress" placeholder="请输入详细地址" />
                    </u-form-item>
                    <u-form-item label="设为默认地址" prop="isdefault">
                        <u-switch v-model="formData.isdefault" />
                    </u-form-item>
                    <u-form-item>
                        <view class="submit" style="width: 100%" @click="submitForm">
                            保存
                        </view>
                    </u-form-item>
                </u-form>
            </div>
        </view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                id: undefined,
                address_id: undefined,
                consignee: '',
                mobile: '',
                region: [],
                address: '',
                detailaddress: '',
                isdefault: false
            },
            area: '',
            city: '',
            province: '',
            selectAddressShow: false,
            formRules: {
                consignee: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                mobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
                address: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
                detailaddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
            },
        };
    },
    onLoad(e) {
        this.$api
            .addressdetail({
                address_id: e.id
            })
            .then((res) => {
                console.log(res);
                if (res.code == 1) {
                    this.formData.id = res.result.id
                    this.formData.address_id = res.result.address_id
                    this.formData.consignee = res.result.consignee
                    this.formData.mobile = res.result.mobile
                    this.formData.address = res.result.province + res.result.city + res.result.area
                    this.formData.detailaddress = res.result.detailaddress
                    this.formData.isdefault = !!res.result.isdefault
                    this.area = res.result.area
                    this.city = res.result.city
                    this.province = res.result.province
                }
            });
    },
    methods: {
        clickress() {
            console.log('d000das')
            this.selectAddressShow = true
        },
        confirm(e) {
            this.formData.address = e.province.label + e.city.label + e.area.label
            this.province = e.province.label
            this.city = e.city.label
            this.area = e.area.label
        },
        submitForm() {
            this.$api
                .editaddress({
                    ...this.formData,
                    isdefault: this.formData.isdefault ? 1 : 0,
                    area: this.area,
                    city: this.city,
                    province: this.province
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.$common.successToShow("保存成功");
                        uni.navigateBack();
                    }
                });
        },
    },
};
</script>

<style lang="scss">
.container{
}
</style>
